<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<header>
    <div class="main_header">
        <div class="container">
            <!--头部开始-->
            <div class="header_top">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-5">
                        <div class="antomi_message">
                            <p>欢迎光顾 咙咚锵购物商城！</p>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-7">
                        <div class="header_top_settings text-right">
                            <ul>
                                <li><a href="${pageContext.servletContext.contextPath}index/login">你好，请登录</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">个人中心</a></li>
                                <li>热线电话: <a href="tel:+176 9231 5313">176 9231 5313</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--头部结束-->

            <!--头部中心开始-->
            <div class="header_middle sticky-header">
                <div class="row align-items-center">
                    <div class="col-lg-2 col-md-6">
                        <div class="logo">
                            <a href="${pageContext.servletContext.contextPath}/"><img src="${pageContext.servletContext.contextPath}/static/front/img/logo/logo.png" alt="" target="_blank"></a>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-12">
                        <div class="search_container">
                            <form action="${pageContext.servletContext.contextPath}/index/list">
                                <div class="hover_category">
                                    <select class="select_option" name="id" id="categori2">
                                        <option value="1">所有类别</option>
                                        <c:forEach var="clist" items="${cateList}" >
                                             <option value="${clist.cateId}" <c:if test="${clist.cateId==id}">selected </c:if>>${clist.cateName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="search_box">
                                    <input placeholder="推荐搜索商品（电脑）..." type="text" name="goodsname" value="${gname}">
                                    <button type="submit">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="header_configure_area">
                            <div class="header_wishlist">
                                <a href="wishlist.html"><i class="ion-android-favorite-outline" ></i>
                                    <span class="wishlist_count">3</span>
                                </a>
                            </div>
                            <div class="mini_cart_wrapper">
                                <a href="javascript:void(0)">
                                    <i class="fa fa-shopping-bag fa-heart-o"></i>
                                    <span class="cart_price">$152.00 <i class="ion-ios-arrow-down"></i></span>
                                    <span class="cart_count">2</span>

                                </a>
                                <!--迷你购物车-->
                                <div class="mini_cart">
                                    <div class="mini_cart_inner">
                                        <div class="cart_item">
                                            <div class="cart_img">
                                                <a href="#"><img src="${pageContext.request.contextPath}/static/front/img/s-product/product.jpg" alt="" target="_blank"></a>
                                            </div>
                                            <div class="cart_info">
                                                <a href="#">苹果 8 Px</a>
                                                <p>数量: 1 X <span> $60.00 </span></p>
                                            </div>
                                            <div class="cart_remove">
                                                <a href="#" target="_blank"><i class="ion-android-close"></i></a>
                                            </div>
                                        </div>
                                        <div class="cart_item">
                                            <div class="cart_img">
                                                <a href="#"><img src="${pageContext.request.contextPath}/static/front/img/s-product/product2.jpg" alt=""></a>
                                            </div>
                                            <div class="cart_info">
                                                <a href="#">橙色座椅</a>
                                                <p>数量: 1 X <span> $60.00 </span></p>
                                            </div>
                                            <div class="cart_remove">
                                                <a href="#"><i class="ion-android-close"></i></a>
                                            </div>
                                        </div>
                                        <div class="mini_cart_table">
                                            <div class="cart_total">
                                                <span>共计:</span>
                                                <span class="price">$138.00</span>
                                            </div>
                                            <div class="cart_total mt-10">
                                                <span>总价:</span>
                                                <span class="price">$138.00</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mini_cart_footer">
                                        <div class="cart_button">
                                            <a href="${pageContext.request.contextPath}/index/cart" target="_blank">查看购物车</a>
                                        </div>

                                    </div>
                                </div>
                                <!--迷你购物车结束-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--头部中心结束-->

            <!--头底部开始-->
            <div class="header_bottom">
                <div class="row align-items-center">
                    <div class="column1 col-lg-3 col-md-6">
                        <div class="categories_menu  categories_three">
                            <div class="categories_title">
                                <h2 class="categori_toggle">所有类别</h2>
                            </div>
                            <div class="categories_menu_toggle">
                                <ul>
                                    <c:forEach var="cL" items="${categoriesList}">
                                        <c:forEach var="cateList" items="${cL}">
                                            <li class="menu_item_children"><a href="${pageContext.servletContext.contextPath}/index/list?id=${cateList.key.cateId}" target="_blank">${cateList.key.cateName} <i class="fa fa-angle-right"></i></a>
                                                <ul class="categories_mega_menu">
                                                    <c:forEach var="cl" items="${cateList.value}">
                                                        <li class="menu_item_children"><a href="${pageContext.servletContext.contextPath}/index/list?id=${cl.cateId}" target="_blank">${cl.cateName}</a></li>
                                                    </c:forEach>
                                                </ul>
                                            </li>
                                        </c:forEach>
                                    </c:forEach>
                                    <li id="cat_toggle" class="has-sub"><a href="#"> 更多分类</a>
                                        <ul class="categorie_sub">
                                            <li><a href="#">Hide Categories</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="column2 col-lg-6 ">
                        <div class="main_menu menu_position text-center">
                            <nav>
                                <ul>
                                    <c:forEach var="cL" items="${categoriesList}">
                                        <c:forEach var="cateList" items="${cL}">
                                            <li><a class="active"  href="${pageContext.servletContext.contextPath}/index/list?id=${cateList.key.cateId}" target="_blank">${cateList.key.cateName}<i class="fa fa-angle-down"></i></a>
                                                <ul class="sub_menu">
                                                     <c:forEach var="cl" items="${cateList.value}">
                                                        <li><a href="${pageContext.servletContext.contextPath}/index/list?id=${cl.cateId}" target="_blank">${cl.cateName}</a></li>
                                                     </c:forEach>
                                                </ul>
                                            </li>
                                        </c:forEach>
                                    </c:forEach>
                                </ul>
                            </nav>
                        </div>

                    </div>
                    <div class="column3 col-lg-3 col-md-6">
                        <div class="header_bigsale">
                            <a href="#">咙咚商城大促销</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--头底部结束-->
        </div>
    </div>
</header>